<template>
  <ve-modal :title="title" v-model="visible" cancelText="关闭" okText="确认" @close="visible = false" @confirm="onConfirm">
    <view class="tip c1 fs24 fw400">上传格式：支持jpg、png、doc、docx、pdf</view>
    <ve-form ref="ve_form">
      <view class="upload fs30 fw400">
        <ve-form-item :label="records.offLineContractTypeName?records.offLineContractTypeName:'合同'" style="width: 100%;" :borderBottom="false">
          <uploadFile v-model:fileId="contractFileId" :fileTypes="fileTypes" @change="getFileObj" :fileIndex="index"></uploadFile>
        </ve-form-item>
      </view>
    </ve-form>
    <!-- <view class="contract fs30" v-if="uploadValue && uploadValue.length">
      <view>合同编号</view>
      <view class="c1">{{ uploadValue[0].contractNo }}</view>
      <view @click="deleteFile"><ve-icon name="delete_2" size="34" /></view>
    </view> -->
  </ve-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import uploadFile from '@/components/upload-file/index.vue'
  import { uploadContractAPI } from '@/api/order/lOrder'
  import { getContractNoAPI } from '@/api/order/lOrder'
  import { getFileInfo } from '@/api/market/member'
  const emit = defineEmits(['ok'])
  const fileTypes = ref(['doc','docx','pdf'])
  const visible = ref(false)
  const records = ref()
  const orderId = ref()
  const index = ref(1)
  const title = ref('维护')
  const uploadValue = ref([])
  const contractFileId = ref()

  const open = (rec, od) => {
    console.log('rec', rec)
    console.log('od', od)
    records.value = undefined

    records.value = rec
    orderId.value = od
    visible.value = true
    contractFileId.value = rec.contractFileId

    if (records.value.contractFileId) {
      getFileInfo({ id: records.value.contractFileId }).then((res) => {
        const result = res.result
        uploadValue.value = [result].map((item) => {
          return {
            url: '',
            name: item.originalFileName,
            contractFileId: item.fileIdStr,
            contractNo: records.value.contractNo,
          }
        })
      })
    }
  }
  const getFileObj = (e) => {
    console.log('文件file: ', e)
    // 获取合同编号
    contractFn(records.value.contractType, e) //1：下单 2:续租 3:换车
  }
  const contractFn = (val, e) => {
    getContractNoAPI({
      type: val,
    }).then((res) => {
      // 将信息填入
      uploadValue.value = [{
        url: '',
        name: e.fileName,
        contractFileId: e.fileIdStr,
        contractNo: res.result,
      }]
    })
  }
  // 删除
  const deleteFile = () => {
    uploadValue.value = []
    // records.value.contractFileId = ''
    contractFileId.value = ''
  }
  // 点击确认
  const onConfirm = () => {
    // 调用上传接口
    var paramsData = {
      contract: {
        contractFileId: uploadValue.value[0]?.contractFileId || undefined,
        contractNo: uploadValue.value[0]?.contractNo || undefined,
        id: records.value.id,
        contractType: records.value.contractType,
        refId: records.value.refId,
        contractName: uploadValue.value[0]?.name || undefined,
      },
      id: orderId.value,
    }
    console.log(paramsData)
    uploadContractAPI(paramsData).then((res) => {
      console.log(res)
      uni.showModal({
      	title: '提示',
      	content: '操作成功',
        showCancel: false,
      	success: function (res) {
      		if (res.confirm) {
      			visible.value = false
            uploadValue.value = []
            emit('ok')
      		}
      	}
      });
    })
  }

  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  .tip{
    background: #E8F3FF;
    padding: 0 32rpx;
    height: 80rpx;
    width: calc(100% + 64rpx);
    margin-left: -32rpx;
    line-height: 80rpx;
  }
  .upload{
    width: 100%;
    height: 110rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .choose{
      color: #9EA5BB;
    }
    .is_choose{
      display: flex;
      justify-content: space-between;
      align-items: center;
      text{
        display: inline-block;
        line-height: 1.2;
        max-width: 400rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .contract{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100rpx;
    background: #F7F8FA;
    padding: 0 24rpx;
    margin-bottom: 32rpx;
    view:nth-child(1){
      color: #8491A8;
    }
    view:nth-child(2){
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text-align: center;
    }
    view:nth-child(3){
      margin: 0 24rpx;
    }
  }
</style>
